<template>
    <div class="builders">
        <pub-head isBorder='true'></pub-head>

        <!-- 头部 -->
        <div class="head ali-c flex">
            <router-link :to="'/'">首页 ></router-link>
            <router-link :to="'/search'">信息查询 ></router-link>
            <span class="blue-c">&nbsp;二级建造查询</span>
        </div>

        <!-- 查询 -->
        <div class="search-article flexv" v-show="result == false">

            <!-- 查询内容 -->
            <div class="search-box flexv">
                <h3 class="search-box-head ali-b">请输入查询条件 <b class="grey">（输入任意一项即可）</b></h3>
                <ul class="search-lists flexv">
                    <li class="search-list flex">
                        <span class="search-list-name">人员名称</span>
                        <input type="text" class="search-list-input flex1" v-model="user">
                        <img class="search-list-img" v-show="!user" src="~@/assets/in-ico.png" alt="">
                    </li>
                    <li class="search-list flex">
                        <span class="search-list-name">资格证书编号</span>
                        <input type="text" class="search-list-input flex1" v-model="qid">
                        <img class="search-list-img" v-show="!qid" src="~@/assets/in-ico.png" alt="">
                    </li>
                    <li class="search-list flex job" @click="jobShow">
                        <span class="search-list-name">注册专业</span>
                        <input type="text" class="search-list-input flex1" v-model="job" placeholder="请选择" readonly value='job'>
                    </li>
                    <li class="search-list flex">
                        <span class="search-list-name">企业名称</span>
                        <input type="text" class="search-list-input flex1" v-model="cname">
                        <img class="search-list-img" v-show="!cname" src="~@/assets/in-ico.png" alt="">
                    </li>
                    <li class="search-list flex">
                        <span class="search-list-name">证书编号</span>
                        <input type="text" class="search-list-input flex1" v-model="id">
                        <img class="search-list-img" v-show="!id" src="~@/assets/in-ico.png" alt="">
                    </li>
                    <li class="search-list flex">
                        <span class="search-list-name">注册编号</span>
                        <input type="text" class="search-list-input flex1" v-model="rid">
                        <img class="search-list-img" v-show="!rid" src="~@/assets/in-ico.png" alt="">
                    </li>
                </ul>
                <button type="button" v-show="txt == false" class="sub-search danger">请至少填写一项</button>
                <button type="button" v-show="txt == true" class="sub-search" @click="search">立即查询</button>
            </div>

            <!-- 遮罩层 -->
            <div class="shadow" v-show="shadow" @click="close"></div>

            <!-- 专业弹窗 -->
            <div class="type-pop flexv" v-show="jobPop">
                <div class="type-pop-head">选择注册专业</div>
                <div class="flex type-list-box">
                    <ul class="type-lists flex1">
                        <li class="flex type-list ali-c jus-b" v-for="(item, index) in items" :key="index" @click="touch(index)">
                            <span class="type-list-name">{{item.name}}</span>
                            <div class="type-list-btn flexc" :class="{'on': ths == index}"><span></span></div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <!-- 查询结果 -->
        <div class="search-result" v-show="result == true">
            <!-- 重新查询 -->
            <div class="research flexc"><p @click="research">重新查询</p></div>

            <!-- 查询结果列表 -->
            <div class="search-result-box flexv">
                <div class="search-result-head flex ali-c">
                    <span class="name">查询结果</span>
                </div>
                <div class="search-result-lists flexv" :class="{'flexc' : isNone == true}">
                    <ul class="flex1 flexv" v-for="(info, index) in results" :key="index" v-show="!isNone">
                        <li class="ali-c">
                            <span class="name">序号</span>
                            <p class="txt flex1">{{index + 1}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">姓名</span>
                            <p class="txt flex1">{{info.name}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">企业名称</span>
                            <p class="txt flex1">{{info.company_name}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">注册编号</span>
                            <p class="txt flex1">{{info.register_num}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">证书编号</span>
                            <p class="txt flex1">{{info.certificate_num}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">资格证书编号</span>
                            <p class="txt flex1">{{info.qualification_certificate_num}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">证书状态</span>
                            <p class="txt flex1">{{info.certificate_status}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">注册专业</span>
                            <p class="txt flex1">{{info.reigster_major}}</p>
                        </li>
                        <li class="ali-c">
                            <span class="name">证书有效期至</span>
                            <p class="txt flex1">{{info.register_valid_date}}</p>
                        </li>
                    </ul>
                    <div class="more" @click="more" v-show="lookMore">查看更多</div>

                    <!-- 空 -->
                    <div class="empty-lists" v-show="isNone">没有数据哦~</div>
                </div>
            </div>
        </div>


        <!-- 底部占位符 -->
        <div class="pub-foot-seat"></div>

        <pub-foot search="true"></pub-foot>
    </div>
</template>
<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import { Toast, List } from 'vant';
import pubHead from '@/components/head'
import pubFoot from '@/components/foot'

Vue.use(Toast).use(List);
export default {
    data() {
        return{
            txt: false, // 已输入查询信息？
            user: null, // 人员名称
            qid: null, // 资格证书编号
            job: null, // 注册专业
            jobID: null, // 注册专业代码
            cname: null, // 企业名称
            id: null, // 证书编号
            rid: null, // 注册编号
            page: 1, // 显示的页数
            url: null, // 姓名
            jobPop: false, // 显示专业弹窗？
            shadow: false, // 显示遮罩层？
            ths: -1, // 选中下标
            items: [
                {name:"全部",id:""},
                {name:"建筑工程",id:"DIC0009001"},
                {name:"公路工程",id:"DIC0009002"},
                {name:"水利水电工程",id:"DIC0009006"},
                {name:"市政公用工程",id:"DIC0009007"},
                {name:"矿业工程",id:"DIC0009009"},
                {name:"机电工程",id:"DIC0009010"},
            ],
            result: false, // 显示结果？
            isNone: false, // 结果为空？
            results: [], //结果列表
            lookMore: false, //查看更多？
            
        }
    },
    created(){

    },
    computed: {
        ...mapState(['user'])
    },
    watch: {
        user(newName, oldName){
            if (this.user) {
                this.txt = true
            }else {
                this.txt = false
            }
        },
        qid(newName, oldName){
            if (this.qid) {
                this.txt = true
            }else {
                this.txt = false
            }
        },
        job(newName, oldName){
            if (this.job) {
                this.txt = true
            }else {
                this.txt = false
            }
        },
        cname(newName, oldName){
            if (this.cname) {
                this.txt = true
            }else {
                this.txt = false
            }
        },
        id(newName, oldName){
            if (this.id) {
                this.txt = true
            }else {
                this.txt = false
            }
        },
        rid(newName, oldName){
            if (this.rid) {
                this.txt = true
            }else {
                this.txt = false
            }
        },
        txt(newName, oldName){
            if (this.user||this.cname||this.id||this.qid||this.job||this.rid) {
                this.txt = true
            } else if(!this.name&&!this.cname&&!this.id&&!this.id&&!this.qid&&!this.qid&&!this.job) {
                this.txt = false
            }
        },
    },
    components: {
        pubHead,
        pubFoot,
        "van-list": List,
    },
    methods: {
        // 点击查询按钮
        search(){
            Toast.loading({
                mask: true,
                message: '加载中...'
            });
            this.url = 'https://api.shenjian.io/?appid=cbbd00770f6bec47258e43023f98de1d';
            // 改变了姓名
            if(this.user){
                this.url = this.url + '&name=' + this.user;
            }
            // 改变了公司名称
            if(this.cname){
                this.url = this.url +  '&enterpriseInfoName=' + this.cname;
            }
            // 改变了资格证书编号
            if(this.qid){
                this.url = this.url +  '&q_qualNum=' + this.qid;
            }
            // 改变了注册编号
            if(this.rid){
                this.url = this.url +  '&registrationNum=' + this.rid;
            }
            // 改变了证书编号
            if(this.id){
                this.url = this.url +  '&certNumber=' + this.id;
            }
            // 改变了专业
            if(this.job){
                this.url = this.url +  '&regType=' + this.jobID;
            }
            this.axios.get('http://jxjq.0791jr.com/index.php?m=App&c=Test&a=index', {
                params: {parameter: this.url + '&q_certStatus=0' + '&pageIndex=' + this.page++}
            }).then(res => {
                if(res.data.error_code == 0){
                    let data = res.data.data.data;
                    this.result = true;
                    this.results = [...this.results,...data];
                    res.data.data.hasMore == 'false' ? this.lookMore = false : this.lookMore = true;
                    Toast.clear();
                    if(data.length < 1){
                        this.isNone = true
                    }
                }
            })
        },
        // 点击专业
        jobShow(){
            this.jobPop = true
            this.shadow = true
        },
        // 选择专业
        touch(index) {
            this.ths = index
            this.job = this.items[index].name
            this.jobID = this.items[index].id
            this.jobPop = false
            this.shadow = false
            console.log(this.jobID)
        },
        // 关闭弹窗
        close(){
            this.jobPop = false
            this.shadow = false
        },
        // 重新查询
        research(){
            this.result = false;
        },
        more(){
            this.search()
        },
    }
}
</script>
<style lang="less" scoped>
.builders {
    min-height: 100vh;
    background-color: #f5f5f5;
    .head {
        height: 0.8rem;
        padding: 0 0.24rem;
        font-size: 0.28rem;
        line-height: 120%;
        position: fixed;
        left: 0;
        right: 0;
        background-color: #f5f5f5;
        span,a {
            color: #999;
            font-weight: bold;
        }
    }
    // 查询信息
    .search-box {
        margin-top: 0.8rem;
        padding: 0 0.4rem;
        background-color: #fff;
        .search-box-head {
            margin-top: 0.36rem;
            font-size: 0.32rem;
            font-weight: bold;
            color: #333;
            line-height: 120%;
            display: inline-flex;
            b {
                font-size: 0.26rem;
                font-weight: normal;
                color: #999;
            }
        }
        .search-lists {
            width: 100%;
            height: auto;
            margin-top: 0.44rem;
            .search-list {
                width: 100%;
                height: 0.9rem;
                line-height: 0.9rem;
                border-bottom: 1px dashed #d9d9d9;
                .search-list-name {
                    font-size: 0.26rem;
                    font-weight: bold;
                    color: #333;
                }
                .search-list-input {
                    margin-left: 0.2rem;
                    font-size: 0.26rem;
                    text-align: right;
                    color: #333;
                }
                .search-list-img {
                    width: 0.32rem;
                    height: 0.32rem;
                    margin: auto 0;
                }
            }
            .type,.job{
                .search-list-input{
                    padding-right: 0.2rem;
                    background: url(~@/assets/to.png) no-repeat right center;
                    padding-right: 0.2rem;
                    background-size: 0.12rem 0.24rem;
                }
            }
        }
        .sub-search {
            width: 100%;
            height: 0.8rem;
            margin: 0.5rem 0 0.9rem;
            font-size: 0.26rem;
            line-height: 0.8rem;
            text-align: center;
            color: #fff;
            border-radius: 0.1rem;
            background-color: #1f78ff;
        }
        .danger{
            background-color: #fd4c4d;
        }
    }
    // 遮罩层
    .shadow {
        width: 100%;
        min-height: 100vh;
        position: absolute;
        z-index: 100;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.6);
    }
    //弹窗
    .type-pop {
        width: 4.9rem;
        height: 5.96rem;
        margin: auto;
        padding: 0.42rem 0.42rem 0;
        border-radius: 0.1rem;
        background-color: #fff;
        position: fixed;
        z-index: 110;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        font-size: 0.28rem;
        color: #333;
        .type-pop-head {
            font-size: 0.34rem;
            font-weight: bold;
            text-align: center;
        }
        .type-list-box {
            width: 100%;
            height: 4.8rem;
            padding-top: 0.4rem;
            overflow-y: auto;
            .type-lists{
                width: 100%;
                height: auto;
                .type-list {
                    width: 100%;
                    height: 0.9rem;
                    border-bottom: 1px solid #dbdbdb;
                    .type-list-btn {
                        width: 0.34rem;
                        height: 0.34rem;
                        border: 1px solid #999;
                        border-radius: 100%;
                        span {
                            width: 0.22rem;
                            height: 0.22rem;
                            border-radius: 100%;
                            background-color: #fff;
                        }
                    &.on {
                        border-color: #1f78ff;
                        span{
                            background-color: #1f78ff;
                        }
                    }
                    }
                }
                .type-list:last-child{
                    border-bottom: none;
                }
            }
        }
    }
    // 查询结果
    .search-result {
        // 按钮
        .research {
            width: 100%;
            height: 1.4rem;
            position: fixed;
            top: 1.72rem;
            left: 0;
            right: 0;
            padding: 0 0.24rem;
            font-size: 0.26rem;
            text-align: center;
            color: #fff;
            background-color: #fff;
            p {
                width: 100%;
                height: 0.8rem;
                border-radius: 0.1rem;
                line-height: 0.8rem;
                background-color: #1f78ff;
                cursor: pointer;
                
            }
        }
        // 结果列表
        .search-result-box {
            margin-top: 2.4rem;
            .search-result-head {
                height: 0.78rem;
                padding: 0 0.24rem;
                border-bottom: 1px solid #d9d9d9;
                background-color: #fff;
                .name{
                    height: 0.36rem;
                    padding-left: 0.1rem;
                    border-left: 2px solid #1f78ff;
                    font-size: 0.3rem;
                    font-weight: bold;
                    line-height: 0.36rem;
                    color: #1f78ff;
                }
                .note {
                    margin-left: 0.1rem;
                    font-size: 0.26rem;
                    line-height: 120%;
                    font-weight: bold;
                    color: #fd4c4d;
                }
            }
            // 结果内容
            .search-result-lists {
                ul {
                    margin-bottom: 0.2rem;
                    padding: 0 0.4rem;
                    background-color: #fff;
                    li {
                        width: 100%;
                        height: 0.9rem;
                        border-bottom: 1px dashed #d9d9d9;
                        font-size: 0.26rem;
                        color: #333;
                        background-color: #fff;
                        .name {
                            width: 1.85rem;
                            height: 0.5rem;
                            border-radius: 0.1rem;
                            line-height: 0.5rem;
                            text-align: center;
                            font-weight: bold;
                            color: #1f78ff;
                            background-color: #dcecff;
                        }
                        .txt {
                            padding-left: 0.2rem;
                            line-height: 120%;
                        }
                    }
                    li:last-child{
                        border-bottom: none;
                        margin-bottom: 0.4rem;
                    }
                }
                .more {
                    width: 1.8rem;
                    height: 0.6rem;
                    margin: 0.2rem auto;
                    font-size: 0.24rem;
                    text-align: center;
                    line-height: 0.6rem;
                    color: #fff;
                    border-radius: 0.1rem;
                    background-color: #999;
                }
                .empty-lists {
                    width: 100%;
                    height: 5.90rem;
                    padding-top: 0.6rem;
                    text-align: center;
                    background-color: #fff;
                }
            }
        }
    }
}
</style>
